<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- Header -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          <span class="text-gradient">视频工具</span>
        </h1>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          提供视频相关的小工具，包括在线录屏、压缩、转换等功能（部分工具在新页面中实现）
        </p>
      </div>

      <!-- Tool Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="tool in videoTools" :key="tool.id" class="tool-card">
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center flex-shrink-0">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tool.icon"></path>
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="text-lg font-semibold text-gray-900 mb-2">{{ tool.name }}</h3>
              <p class="text-gray-600 text-sm mb-3">{{ tool.description }}</p>
              <NuxtLink :to="tool.path" class="primary-button inline-block">
                开始使用
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const videoTools = [
  {
    id: 1,
    name: '在线录屏',
    description: '录制屏幕和麦克风音频，支持开始/停止与下载录制文件',
    path: '/video-tools/recorder',
    icon: 'M15 10l4.553-2.276A2 2 0 0122 9.618V14.382a2 2 0 01-2.447 1.894L15 14V10z'
  },
  {
    id: 2,
    name: '视频压缩',
    description: '快速压缩视频文件以减小体积（稍后实现）',
    path: '/video-tools/compress',
    icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  }
    ,
    {
      id: 3,
      name: '视频转码',
      description: '将视频转换为浏览器支持的容器/编码（WebM 等），无需上传服务器',
      path: '/video-tools/transcode',
      icon: 'M3 7v4a1 1 0 001 1h3l3 3V4L7 7H4a1 1 0 00-1 1z'
    },
    {
      id: 4,
      name: '视频改尺寸',
      description: '调整视频分辨率并重新编码以改变尺寸（浏览器端）',
      path: '/video-tools/resize',
      icon: 'M4 6h16M4 12h16M4 18h16'
    },
    {
      id: 5,
      name: '视频画面裁剪',
      description: '在浏览器端裁剪视频画面并导出裁剪后的视频',
      path: '/video-tools/crop',
      icon: 'M3 3h18v18H3V3z'
    },
    {
      id: 6,
      name: '视频调速',
      description: '改变视频播放速度并导出不同速度的视频（包含音频加速/降速）',
      path: '/video-tools/speed',
      icon: 'M12 6v6l4 2'
    },
    {
      id: 7,
      name: 'm3u8 转 MP4',
      description: '输入 m3u8 播放列表链接，浏览器端下载分片并使用 ffmpeg.wasm 合并为 MP4，完成后可直接下载（注意 CORS 与性能限制）',
      path: '/video-tools/m3u8',
      icon: 'M12 4v16m8-8H4'
    },
    {
      id: 8,
      name: '视频加水印',
      description: '为视频添加文字水印。',
      path: '/video-tools/watermark',
      icon: 'M12 4v16m8-8H4'
    },
    {
      id: 9,
      name: '视频倒放（浏览器端）',
      description: '倒放视频，不一样的创作体验',
      path: '/video-tools/reverse',
      icon: 'M12 4v16m8-8H4'
    }
]

useHead({
  title: '视频工具 - 八八在线工具',
  meta: [
    { name: 'description', content: '在线视频工具，提供屏幕录制、压缩、转换等实用功能' },
    { property: 'og:title', content: '视频工具 - 八八在线工具' },
    { property: 'og:description', content: '在线视频工具，提供屏幕录制、压缩、转换等实用功能' }
  ]
})
</script>
